<template>
  <section>
    <video class="full-height full-width" ref="video" controls></video>
  </section>
</template>

<script>
  let Hls = require('hls.js');
  export default {
    data() {
      return {
        hls: ''
      };
    },
    mounted() {
        this.getStream("http://101.206.123.213:7086/live/cameraid/1000003%240/substream/1.m3u8");
    },
    methods: {
      videoPause() {
        if (this.hls) {
          this.$refs.video.pause();
          this.hls.destroy();
          this.hls = null;
        }
      },
      getStream(source) {
        if (Hls.isSupported()) {
          this.hls = new Hls();
          this.hls.loadSource(source);
          this.hls.attachMedia(this.$refs.video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log('加载成功');
            this.$refs.video.play();
          });
          this.hls.on(Hls.Events.ERROR, (event, data) => {
            // console.log(event, data);
            // 监听出错事件
            console.log('加载失败');
          });
        }
      },
      beforeDestroy() {
        this.videoPause();
      }
    }
  };
</script>
